<template>
  <div id="editorChange">
    <el-collapse v-model="activeNames1">
      <el-collapse-item title="内容" name="1">
        <el-card style="height: 610px">
          <quill-editor
            v-model="content"
            ref="myQuillEditor"
            style="height: 480px;"
            :options="editorOption"
          ></quill-editor>
        </el-card>
      </el-collapse-item>
    </el-collapse>
    <el-collapse v-model="activeNames2">
      <el-collapse-item title="内容样式" name="2">
        <ul class="content-list">
          <li>
            <span>上间距：</span>
            <div>
              <edgeSetting v-model="styles.marginTop" unit="px" :max="50" :init="Number(styles.marginTop)"></edgeSetting>
            </div>
          </li>
          <li>
            <span>下间距：</span>
            <div>
              <edgeSetting v-model="styles.marginBottom" unit="px" :max="50" :init="Number(styles.marginBottom)"></edgeSetting>
            </div>
          </li>
          <li>
            <span>左右间距：</span>
            <div>
              <edgeSetting v-model="styles.marginLR" unit="px" :max="50" :init="Number(styles.marginLR)"></edgeSetting>
            </div>
          </li>
          <li>
            <span>圆角：</span>
            <div>
              <edgeSetting v-model="styles.circle" unit="px" :max="15" :init="Number(styles.circle)"></edgeSetting>
            </div>
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import * as Quill from "quill"; // 引入编辑器
import { ImageDrop } from "quill-image-drop-module";
import ImageResize from "quill-image-resize-module";
Quill.register("modules/imageDrop", ImageDrop);
Quill.register("modules/imageResize", ImageResize);
import edgeSetting from "../../comm/edgeSetting";
export default {
  name: "editorChange",
  watch: {
    content() {
      this.styles.html = this.content;
    },
  },
  data() {
    return {
      activeNames1: "1",
      activeNames2: "2",
      content: null,
      editorOption: {
        modules: {
          toolbar: [
            [
              "bold",
              "italic",
              "underline",
              "strike",
              "clean",
              { color: [] },
              "image",
              { size: ["small", false, "large", "huge"] },
            ],
            [
              { align: [] },
              { list: "ordered" },
              { list: "bullet" },
              { indent: "-1" },
              { indent: "+1" },
            ],
          ],
          imageResize: {
            displayStyles: {
              backgroundColor: "black",
              border: "none",
              color: "white",
            },
            modules: ["Resize", "DisplaySize", "Toolbar"],
          },
        },
      },
    };
  },
  created() {
    this.content = this.styles.html;
  },
  computed: {
    ...mapState(["list", "currentId", "currentName"]),
    styles() {
      return this.list[this.currentId].styles;
    },
  },
  components: {
    quillEditor,
    edgeSetting,
  },
};
</script>

<style lang="less" scoped>
@import url("../../../assets/css/base.less");
/deep/.ql-toolbar.ql-snow {
  padding: 0;
}
/deep/.ql-toolbar.ql-snow .ql-formats {
  margin-right: 0;
}
/deep/.ql-formats {
  display: block;
  border-bottom: 1px solid #ccc;
  padding: 8px 0;
}
/deep/.ql-formats:last-child {
  border-bottom: 0;
  padding-top: 8px;
}
</style>

